<template>
	<view class="content">
		<view class="cd-saerch-area">
			<u-search 
			placeholder="请输入搜索关键词" 
			:showAction="false" 
			disabled="disabled"
			@tap="changeprop"
			></u-search>
		</view>
		<view class="sidenav">

			<!-- 左边点击 -->
			<view class="nav-left">
				<view class="nav-left-item">
					<view @tap="change(item.id)" :class="{ title:true, title_active : item.id === currentCategory.id }"
						v-for="(item,index) in categoryList" :key="item.id">
						<view class="red"></view>
						{{item.name}}
					</view>
				</view>
			</view>

			<!-- 右边大盒子 -->
			<view class="nav-right">
				<!-- banner图 -->
				<view class="pro">

					<image class="pro-pic" :src="currentCategory.banner_url"></image>

					<view class="pro-title">{{currentCategory.front_name}}</view>
				</view>

				<!-- 居家 -->
				<view class="pro-center">
					<span class="pro-text"></span>
					<h3 class="pro-text-title">{{currentCategory.name}}</h3>
				</view>

				<!-- 宫格图 -->
				<view class="grid">
					<u-grid :border="true" col="3">
						<u-grid-item v-for="(listItem,listIndex) in currentCategory.subCategoryList" :key="listIndex">
							<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="listItem.wap_banner_url" :size="30">
							</u-icon>
							<text class="grid-text">{{listItem.name}}</text>
						</u-grid-item>
					</u-grid>
					<u-toast ref="uToast" />
				</view>
			</view>
		</view>
		<customTabBar></customTabBar>
	</view>
</template>

<script>
	import customTabBar from "@/custom-tab-bar/index.vue"
	import {
		Apicategory,
		ApigetCategoryCurrent
	} from "@/utils/api.js"
	export default {

		components: {
			customTabBar
		},

		data() {
			return {

				// 左边数据
				categoryList: [],
				// 右边数据
				currentCategory: {},

			}
		},
		onShow() {
			this.$store.commit('changeTabbarIndex', 2);
		},
		async onLoad() {
			let res = await Apicategory()
			if (res.errno !== 0) {
				return;
			}
			let {
				categoryList,
				currentCategory,
			} = res.data

			console.log(res);

			this.categoryList = categoryList;
			this.currentCategory = currentCategory;

		},
		methods: {
			async change(id) {
				let res = await ApigetCategoryCurrent(id)
				if (res.errno !== 0) return;


				this.currentCategory = res.data.currentCategory;

				uni.showLoading({
					title: '加载中',
				})
				setTimeout(function() {
					uni.hideLoading();
				}, 500);

			},
			click(name) {
				this.$refs.uToast.success(`点击了第${name}个`)
			},
			changeprop(){
				uni.navigateTo({
					url:"/pages/porop/porop"
				})
			}
		}


	}
</script>

<style lang="scss">
	.cd-saerch-area {
		padding: 10px 12px;
		// height: 108rpx;
		background-color: white;
	}

	.sidenav {
		height: 90vh;
		display: flex;
		// background-color: coral;
		width: 100%;
		background-color: #f7f8fa;

		.nav-left {
			width: 150rpx;
			height: 124rpx;

			.nav-left-item {
				display: block;
				box-sizing: border-box;
				// padding: 15rpx 14rpx;

				color: #323233;
				font-size: 14px;
				line-height: 30px;

				cursor: pointer;
				user-select: none;

				.title {
					width: 80%;
					line-height: 124rpx;
					text-align: center;
					position: relative;
					display: inline-block;
					padding-right: 30rpx;

					.red {
						display: none;
					}
				}

				.title_active {
					background-color: #fff;

					.red {
						width: 8rpx;
						height: 32rpx;
						background: red;
						position: absolute;
						left: 0px;
						top: 50%;
						transform: translateY(-50%);
						display: block;
					}
				}

			}


		}

		.nav-right {
			// width: 80%;
			flex: 1;
			background-color: #fff;
			text-align: center;

			.pro {
				width: 570rpx;
				height: 292rpx;
				position: relative;


				.pro-pic {

					width: 100%;
					height: 100%;
					margin: 0 7px;
					border-radius: 5px;
					box-shadow: 0 0 6px #000;
					filter: brightness(0.5);
				}

				.pro-title {
					width: 100%;
					color: #fff;
					position: absolute;
					top: 45%;
					left: 4%;
					// z-index: 10;
					text-align: center;
				}
			}

			.pro-center {
				width: 100%;
				height: 50px;
				position: relative;
				background: #fff;
				font-size: 16px;

				.pro-text {
					width: 50%;
					height: 2px;
					background-color: #ccc;
					position: absolute;
					margin: auto;
					left: 0;
					top: 0;
					bottom: 0;
					right: 0;
				}

				.pro-text-title {
					width: 30%;
					height: 40px;
					background-color: #fff;
					position: absolute;
					margin: auto;
					left: 0;
					top: 0;
					bottom: 0;
					right: 0;
					line-height: 40px;
					text-align: center;
					color: #000;
				}
			}

			.grid {
				border: 1px solid #dadbde;

				.u-grid-item:last-child {
					border-right: 1px solid #dadbde;
				}

				.u-grid-item {
					padding: 16px 8px;
					height: 172rpx;


					.grid-text {
						font-size: 24rpx;
						margin-top: 23rpx;
					}
				}
			}

		}
	}
</style>
